<!DOCTYPE html>
<html>
<head>
    <title>Loading Branch Data</title>
    <link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
    <script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="../common/samples.css">
</head>
<body>
<div class='header_comment'>Dynamic loading: loadBranch() method</div>
<div id="testA" style='width:250px; height:250px; float:left'></div>

<script type="text/javascript" charset="utf-8">

    webix.ready(function(){

        webix.ui({
            container:"testA",
            view:"tree",
            data:[
                {id:1, value:"Layout Branch", webix_kids:true},
                {id:2, value:"Data Branch", webix_kids:true},
                {id:6, value:"Calendar"}
            ],
            on:{
                onBeforeOpen:function(id){
                    //if children has not been loaded yet
                    if(this.getItem(id).$count===-1){
                        webix.message("Getting children of " + id);
                        this.loadBranch(id, null, "data/data_dyn_json.php");
                    }
                }
            }
        });

    });
</script>
</body>
</html>